<template>
  <a-row :style="{'height':viewHeight-100+'px'}" class="wrap">
    <!-- {{checkedState}} -->
    <!-- 卡片视图表格开始 --> 
    <a-row  type="flex" v-for="(item, index) in sourceData" :key="index" class="card">
      <a-row type="flex" class="item">
        <a-col flex="50%">
          <!-- {{ typeof(checkedState[index])}} -->
          <!-- {{ checkedState[index]}} -->
          <a-checkbox @change="e=>onChange(e, index)" :default-checked="checkedState[index]===true?true:false" />
        </a-col>
        <a-col flex="50%"></a-col>
      </a-row>
      <a-row type="flex" class="item" v-for="(item2,index2) in sourceList" :key="index2">
        <!-- 1. 公共 -->
        <a-col class="title">{{item2.title}}</a-col>
        <!-- 2. 序号 -->
        <a-col v-if="item2.param == 'index'">{{ index+1 }}</a-col>
        <!-- 3. 常规 -->
        <a-col v-if="item2.param !='action' && item2.param !='index'"  v-html="pointerRed(item[item2.param], globalSearchValue)" :key="Math.random()"></a-col>
        <!-- 操作 -->
        <a-col v-if="item2.param == 'action'">
          <a-button type="primary" size="small" v-if="pageConfig.update" @click="cardTableEdit(item.id, item)">{{ $t('app.setting.operation.edit') }}</a-button>
          <a-popconfirm
            :title="$t('app.setting.popconfirm.ask')"
            :ok-text="$t('app.setting.popconfirm.cancel')"
            :cancel-text="$t('app.setting.popconfirm.delete')"
            @confirm="deleteConfirm(item.id)"
          >
            <a-button type="danger"  size="small" v-if="pageConfig.delete" style="margin-left: 10px;">{{ $t('app.setting.operation.delete') }}</a-button>
          </a-popconfirm>
        </a-col>
      </a-row>
    </a-row>
    <!-- 卡片视图表格结束 -->

  </a-row>
</template>

<script>

import viewObject from '../../utils/viewHeight';
import bus from '@/utils/bus'
import store from '@/utils/bus'

export default {
  name: 'CardTable',
  components: {

  },
  props: {
    sourceData: Array,
    sourceList: Array,
    globalSearchValue: String,
    currentPageConfig: Object,
  },
  data () {
    return {
      
      viewHeight: viewObject.viewResult,
      // 分页参数
      pageSize: 10,
      pageNo: 1,
      total: 100,
      pageSizeOptions: ['10','20','40','80'],
      // 表格数据
      data: [],
      // 动态表格列
      dataSourceChangeCopy: [
        // {title: '序号', param: 'index', index: 0},
        // {title: '年龄', param: 'age', index: 1},
        // {title: '姓名', param: 'name', index: 2},
        // {title: '地址', param: 'address', index: 3},
        // {title: '标签', param: 'tags', index: 4},
        // {title: '操作', param: 'action', index: 5}
      ],

      chooseResult: [],
      checkedState: [],
      pageConfig: {
        add: false,
        cardView: false,
        column: false,
        delete: false,
        export: false,
        query: false,
        reload: false,
        seniorSearch: false,
        update: false
      }

    }
  },

  created(){
    this.chooseResult = this.$store.getters.selectedRowKeys
    this.sourceData.map((item, index)=>{
      let tempResult = false;
      this.chooseResult.map((item2, index2)=>{
        if(item2 === index){
          tempResult = true
        }
      })
      this.checkedState.push(tempResult)
    })

    this.pageConfig.add = this.currentPageConfig.add
    this.pageConfig.cardView = this.currentPageConfig.cardView
    this.pageConfig.column = this.currentPageConfig.column
    this.pageConfig.delete = this.currentPageConfig.delete
    this.pageConfig.export = this.currentPageConfig.export
    this.pageConfig.query = this.currentPageConfig.query
    this.pageConfig.reload = this.currentPageConfig.reload
    this.pageConfig.seniorSearch = this.currentPageConfig.seniorSearch
    this.pageConfig.update = this.currentPageConfig.update
  },

  mounted(){
  
  },

  methods: {
    onChangePagin(page, pageSize) { },
    onChangePageSize(current, size){ },

    // 多选操作
    onChange(e, index) {
      // 第一步, 更新当前页面显示的数据
      this.checkedState[index] = e.target.checked
      // 第二步, 更新总的状态管理的数据
      if(e.target.checked){
        this.chooseResult.push(index);
      }else{
        this.chooseResult.map((item2, index2)=>{
          if(item2 === index){
            this.chooseResult.splice(index2, 1)
          }
        })
      }
    },

    // 卡片表格编辑处理
    cardTableEdit(id, record){
      let paramObj = {
        id: id,
        record: record
      }
      this.$emit('cardTableEdit', paramObj);
    },

    // 卡片表格的删除处理
    deleteConfirm(id){
      this.$emit('cardTableDelete', id);
    },

    // 关键词描黄
    pointerRed(text, regKey){
      if(regKey){
        // 1.进行关键词过滤处理
        let key = '<span style="background:#FAFAD2; padding: 0px 6px;">'+regKey+'</span>'
        let regular = new RegExp(regKey, 'g')
        let result = String(text).replace(regular, key);
        // 2.返回处理结果
        return result;
      }else{
        return text
      }
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  flex-direction: row;
  justify-content: space-between;
  color: #1890ff;
  border-bottom: 1px solid #e8e8e8;
  min-height: 200px;
}
.wrap{
  overflow-y: auto;
  background-color: #f9f9f9;
}
// .wrap::-webkit-scrollbar{
//   width: 0 !important;
// }
// .wrap::-webkit-scrollbar {
//   -ms-overflow-style: none;
// }
// .wrap::-webkit-scrollbar {
//   overflow: -moz-scrollbars-none;
// }
.item {
  flex-direction: columns;
  width: 100%;
  padding: 5px 15px;
}
.title {
  font-weight: bold;
  margin-right: 50px;
}
</style>
